var app = angular.module("myApp", []);

app.controller("AppCtrl", function($scope, $http) {
	$http.get("http://localhost:8087/ffmvc/players/").success(function(data) {
		console.log(data)
		$scope.playerPerformances = {};
		$scope.playerPerformances.data = data;
		$scope.reverseSort = false;
		$scope.orderByField = 'points';
	}).error(function(data, status) {
		console.log("error!");
	});
});
app.controller("PlayerCtrl", function($scope, $http) {

	$scope.orderByField = 'points';
	$scope.playerPerformances = {};
	$scope.playerPerformances.data = performances;
	$scope.playerPerformances.away = awayPerformances;
	$scope.playerPerformances.home = homePerformances;
	$scope.playerPerformances.awayPerfs = away;
	$scope.playerPerformances.homePerfs = home;
	$scope.player = player;

});
app.controller("TeamCtrl", function($scope, $http) {

	$scope.reverseSort = false;
	$scope.orderByField = 'points';
	$scope.teamPerformances = {};
	$scope.teamPerformances.data = performances;
	$scope.teamPerformances.away = awayPerformances;
	$scope.teamPerformances.home = homePerformances;
	$scope.venues = 'overall';

});

app.controller("TeamsCtrl", function($scope, $http) {

	$scope.reverseSort = false;
	$scope.orderByField = 'points';
	$scope.teamPerformances = {};
	$scope.teamPerformances.data = performances;
	$scope.teamPerformances.away = awayPerformances;
	$scope.teamPerformances.home = homePerformances;
	$scope.venues = 'overall';

});
app.filter("emptyToEnd", function() {
	return function(array, key) {
		var present = array.filter(function(item) {
			return item[key];
		});
		var empty = array.filter(function(item) {
			return !item[key]
		});
		return present.concat(empty);
	};
});
app.directive('barsChart', function ($parse) {
  //explicitly creating a directive definition variable
  //this may look verbose but is good for clarification purposes
  //in real life you'd want to simply return the object {...}
  var directiveDefinitionObject = {
      //We restrict its use to an element
      //as usually  <bars-chart> is semantically
      //more understandable
      restrict: 'E',
      //this is important,
      //we don't want to overwrite our directive declaration
      //in the HTML mark-up
      replace: false,
      link: function (scope, element, attrs) {
        //converting all data passed thru into an array
    	var data = [];
        var perfs = JSON.parse(attrs.chartData);
    	var weeks =[];
    	for (i = 0; i < 38 && i < perfs.length; i++) {
    	    data.push(perfs[i]);
    	    weeks.push(data[i].week);
    	}
    	var max = d3.max(data, function(d) { return d.points; });
    	
    	var w = window.screen.availWidth/data.length;
    	w = Math.floor(w);
    	var h = 650;
    	var line = h - 50;
    	
    	
    	var yScale = d3.scale.linear()
        .domain([0, max])
        .range([0, line - 30]);

        var chart = d3.select("body")
        .append("svg:svg")
        .attr("class", "chart")
        .attr("width", w * 38)
        .attr("height", h);
       

        chart.selectAll("rect")
        .data(data)
        .enter().append("svg:rect")
        .attr("x", function(d, i) { return i * w; })
        .attr("y", function(d) { return line - .5; })
        .attr("width", w)
        .attr("height", 0);
        
        chart.selectAll("rect")
        .data(data)
        .transition().duration(1000)
        .attr("height", function(d) { return yScale(d.points); })
        .attr("y", function(d) { return line - yScale(d.points) - .5; });
        
        
              
        chart.selectAll("text")
        .data(data)
        .enter().append("svg:text")
        .attr("y", function(d) { return line - yScale(d.points) + 11; })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "white")
        .text(function(d){return d.points;})
        .attr("x", function(d, i) {  return i * w  + ( (w - this.getBBox().width) / 2); });

        chart.selectAll("text")
        .data(weeks, function(d, i){return d.week + " " + i})
        .enter().append("svg:text")
        .attr("y", function(d) { return line + 11; })
        .attr("font-family", "sans-serif")
        .attr("font-size", "11px")
        .attr("fill", "black")
        .text(function(d){return "W" + d;})
        .attr("x", function(d, i) {  return i * w  + ( (w - this.getBBox().width) / 2); });
      	
      } 
   };
   return directiveDefinitionObject;
});